<script lang="ts" setup>

    import { ref,reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
    let a=ref(9)
    //生命周期
    //BeforeCreate和create
    let div1=ref(null)

    console.log("创建阶段")
    //null
    // const divEle=document.getElementById("mydiv")
    // console.log(divEle)

    onBeforeMount(()=>{
        console.log("现在还没有挂载")
    })
    onMounted(()=>{//实质是挂载后你才能操作元素（包括显示数据
        console.log("挂载好了")
        //从服务器boot接口获取数据
        //显示数据
        const divEle=document.getElementById("mydiv")
        console.log(divEle)

        console.log("ref,",div1.value)


    })
    onBeforeUpdate(()=>{
        console.log("在更新之前")
    })
    onUpdated(()=>{
        console.log("更新之后")
    })
    onBeforeUnmount(()=>{
        console.log("卸载之前")
    })
    onUnmounted(()=>{
        console.log("卸载完毕")
    })
     
</script>

<template>
{{ a }}
<div id="mydiv" ref="div1">java成为路边一条</div>
</template>

<style scoped>


</style>
